import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import "../../styles/index.scss";
import { AutoComplete, DataSourceObject, DataSourceType } from "./autoComplete";

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "components/AutoComplete",
  component: AutoComplete,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {},
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onSelect: fn() },
} satisfies Meta<typeof AutoComplete>;

export default meta;

export const SimpleComplete = () => {
  type Story = StoryObj<typeof meta>;
  interface LakerPlayerProps {
    value: string;
    number: number;
  }
  const lakers = [
    "bradley",
    "pope",
    "caruso",
    "cook",
    "cousins",
    "james",
    "AD",
    "green",
    "howard",
    "kuzma",
    "McGee",
    "rando",
  ];
  const lakersWithNumber = [
    { value: "bradley", number: 11 },
    { value: "pope", number: 1 },
    { value: "caruso", number: 4 },
    { value: "cook", number: 2 },
    { value: "cousins", number: 15 },
    { value: "james", number: 23 },
    { value: "AD", number: 3 },
    { value: "green", number: 14 },
    { value: "howard", number: 39 },
    { value: "kuzma", number: 0 },
  ];
  // const handleFetch = (query: string) => {
  //   // return lakers.filter((name) => name.includes(query));
  //   // return lakersWithNumber.filter((player) => player.value.includes(query));
  // };
  const handleFetch = (query: string) => {
    return fetch(`https://api.github.com/search/users?q=${query}`)
      .then((res) => res.json())
      .then(({ items }) => {
        return items
          .slice(0, 10)
          .map((item: any) => ({ value: item.login, ...item }));
      });
  };
  const renderOption = (item: DataSourceType<LakerPlayerProps>) => {
    return (
      <>
        <h5>{item.value}</h5>
      </>
    );
  };

  function action(
    arg0: string
  ): ((item: DataSourceObject) => void) | undefined {
    throw new Error("Function not implemented.");
  }

  return (
    <AutoComplete
      fetchSuggestions={handleFetch}
      renderOption={renderOption}
    ></AutoComplete>
  );
};
